/**
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';

const deviceWidth = Dimensions.get('window').width;

export default class MineHeader extends Component {
    render() {
        return (
            <View>
                <TouchableOpacity>
                    <View style={styles.container}>
                        <View style={{flexDirection:'row',alignItems:'center',marginLeft:10}}>
                            <Image source={require('../image/see.png')} style={{width:80,height:80,borderRadius:40}}/>
                            <Text style={{marginLeft:5}}>小马哥电商</Text>
                            <Image source={require('../image/avatar_vip.png')} style={{width:20,height:20,borderRadius:10,marginLeft:5}}/>
                        </View>
                
                        <Image source={require('../image/icon_cell_rightarrow.png')} style={{width:8,height:13,marginRight:10}}/>
                    </View>
                </TouchableOpacity>
                <View style={{flexDirection:'row',height:50,backgroundColor:'rgba(255,96,0,0.6)'}}>
                    {this.bottomView()}
                </View>
            </View>
        );
    }
    
    bottomView(){
        let views = [];
        let jsonData = [{'title':'马哥券','number':'100'},{'title':'评价','number':'13'},{'title':'收藏','number':'20'}];
        for(let i=0;i<jsonData.length;i++){
            let item = jsonData[i];
            views.push(
                <TouchableOpacity key={i}>
                    <View style={{width:deviceWidth/3,alignItems:'center'}}>
                        <Text style={{color:'white'}}>{item.number}</Text>
                        <Text style={{color:'white'}}>{item.title}</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return views;
    }
}

const styles = StyleSheet.create({
    container: {
        height:100,
        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'space-between',
        backgroundColor: '#FF6000',
    }
});
